import {Ajax} from './ajax.js'; //将已经暴露的模块，引入到当前作用域
import {
    Const
} from './const.js';

let ajax = new Ajax(Const.BASE_PATH); //创建一个ajax对象用以进行异步提交操作
initProvince();

//fetch实现
async function initProvince() {
    //let xhr = await ajax.getPromise('/getProvince', null); //利用了Promise对象的AJAX操作，用于获取省份初始化信息

    //使用fetch进行异步提交，返回值response对象并不会马上获得，要等待服务器的响应。
    let response = await fetch(`${Const.BASE_PATH}/getProvince`,{method:'GET'}
    );    
    //把response中的用户自定义返回数据解析成json对象，其本身也是一个回调函数，所以也需要等待解析。
    let json = await response.json();   
    
    if (response.status == 200) {
        let province = document.getElementById("province");
        let defaultOption = document.createElement("option");
        defaultOption.value = '00';
        defaultOption.innerHTML = '请选择省份';
        defaultOption.selected = true;
        province.appendChild(defaultOption);
        if (json.result == 'ok') {
            json.provinces.forEach(item => {
                let option = document.createElement("option");
                option.value = item.code;
                option.innerHTML = item.name;
                province.appendChild(option);
            });
        }
    }else{
        console.log(error.status + ":" + error.statusText);
    }
}

//axios实现，监听省份下拉列表的变化，一有变化就激活该事件，并且运行对应的事件处理程序。
document.getElementById("province").addEventListener('change', async event => {
    let province = document.getElementById("province");
    let currentProvinceCode = province.value;
    let response = await axios.get(`${Const.BASE_PATH}/getCity`,{params:{currentProvinceCode}});
    if (response.status == 200) {
        let city = document.getElementById("city");
        if (response.data.result == 'ok') {
            city.length = 0; //清除掉原来下拉列表中的数据。
            let defaultOption = document.createElement("option");
            defaultOption.value = '0000';
            defaultOption.innerHTML = '请选择城市';
            defaultOption.selected = true;
            city.appendChild(defaultOption);
            response.data.cities.forEach(item => {
                let option = document.createElement("option");
                option.value = item.code;
                option.innerHTML = item.name;
                city.appendChild(option);
            });
        }
    } else {
        console.log(response.status + ":" + response.statusText);
    }
}, false);

document.getElementById("email").addEventListener('blur', event => {
    let value = document.getElementById("email").value;
    let cssClass = "#emailInfo";
    let reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    if (null == value || value == "") {
        errorOperation(cssClass);
        document.querySelector(`${cssClass}>.info-text`).innerHTML = "请输入email地址！" //在标签内部加入文本信息            
    } else if (!reg.test(value)) {
        errorOperation(cssClass);
        document.querySelector(`${cssClass}>.info-text`).innerHTML = "地址不合法，请检查你的输入！" //在标签内部加入文本信息    
    } else {
        successOperation(cssClass);
        document.querySelector(`${cssClass}>.info-text`).innerHTML = "email地址合法，请继续输入！"
    }
}, false);
document.getElementById("email").addEventListener('focus', event => {
    deleteOperation('#emailInfo');
}, false);
//密码丢失焦点检查
document.getElementById("password").addEventListener('blur', event => {
    let value = document.getElementById("password").value;
    let cssClass = '#passwordInfo';
    if (null == value || value == "") {
        errorOperation(cssClass);
        document.querySelector(`${cssClass}>.info-text`).innerHTML = "请输入密码！" //在标签内部加入文本信息
    } else if (value.length < 6 || value.length > 12) {
        errorOperation(cssClass);
        document.querySelector(`${cssClass}>.info-text`).innerHTML = "密码长度必须大于6，小于12！"
    } else {
        successOperation(cssClass);
        document.querySelector(`${cssClass}>.info-text`).innerHTML = "密码合法，请继续输入！"
    }
}, false);
//密码获取焦点时，消除所有效果

//用户名丢失焦点检查，blur是丢失焦点事件
document.getElementById("userName").addEventListener('blur', event => {
    let value = document.getElementById("userName").value; //获取用户名文本框中的数据
    let reg = /^[A-Za-z0-9]+$/; //只能为英文或数字的正则表达式
    let cssClass = '#userNameInfo';
    if (null == value || value == "") {
        errorOperation(cssClass);
        document.querySelector(`${cssClass}>.info-text`).innerHTML = "请输入用户名！" //在标签内部加入文本信息
    } else if (!reg.test(value)) {
        errorOperation(cssClass);
        document.querySelector(`${cssClass}>.info-text`).innerHTML = "用户名只能是英文和数字！"
    } else {
        userNameCheck(value, cssClass); //检查用户名是否和已经存在的用户冲突
    }
}, false);
//用户名获取焦点时，消除之前所有的检查效果，focus是获取焦点事件
document.getElementById("userName").addEventListener('focus', event => {
    deleteOperation('#userNameInfo');
}, false);

function successOperation(value) {
    document.querySelector(`${value}>.info-img`).classList.add("success-image");
    document.querySelector(`${value}>.info-text`).classList.add("success-text");
}

function errorOperation(value) {
    document.querySelector(`${value}>.info-img`).classList.add("error-image");
    document.querySelector(`${value}>.info-text`).classList.add("error-text");
}

function deleteOperation(value) {
    document.querySelector(`${value}>.info-img`).classList.remove("error-image");
    document.querySelector(`${value}>.info-text`).classList.remove("error-text");
    document.querySelector(`${value}>.info-text`).innerHTML = ""
    document.querySelector(`${value}>.info-img`).classList.remove("success-image");
    document.querySelector(`${value}>.info-text`).classList.remove("success-text");
}
//利用XMLHttpRequest对象，进行AJAX操作
async function userNameCheck(userName, cssClass) {
    let xhr = await ajax.getPromise(`/usercheck?param=${userName}`);
    if (xhr.status == 200) {
        if (xhr.response.result === 'ok') {
            if (!xhr.response.data) {
                errorOperation(cssClass);
                document.querySelector(`${cssClass}>.info-text`).innerHTML = "用户名重复，请换一个再试！"
            } else {
                successOperation(cssClass);
                document.querySelector(`${cssClass}>.info-text`).innerHTML = "用户名合法，请继续输入！"
            }
        }
    } else {
        console.log(xhr.status + ":" + xhr.statusText);
    }
}
